import React from 'react';
import { Card, Row, Col, Typography, Statistic } from 'antd';
import { UserOutlined, ToolOutlined, HistoryOutlined, ExclamationCircleOutlined } from '@ant-design/icons';

const { Title } = Typography;

export const Dashboard: React.FC = () => {
  return (
    <div>
      <Title level={2}>系统概览</Title>

      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={128}
              prefix={<UserOutlined style={{ color: '#0066b2' }} />}
              valueStyle={{ color: '#0066b2' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="物资总数"
              value={56}
              prefix={<ToolOutlined style={{ color: '#52c41a' }} />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="借用中"
              value={23}
              prefix={<HistoryOutlined style={{ color: '#faad14' }} />}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="逾期数"
              value={5}
              prefix={<ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />}
              valueStyle={{ color: '#ff4d4f' }}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={12}>
          <Card title="最近借用记录" bordered={false}>
            <div style={{ color: '#999', textAlign: 'center', padding: '20px' }}>
              暂无借用记录
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="系统状态" bordered={false}>
            <div style={{ lineHeight: '32px' }}>
              <div>✅ 用户服务: 运行正常</div>
              <div>✅ 物资服务: 运行正常</div>
              <div>✅ 借用服务: 运行正常</div>
              <div>✅ 网关服务: 运行正常</div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;